<template>
	<view class="home">
		<u-navbar placeholder left-icon-size="0" border>
			<template #center>
				<up-tabs :scrollable="false" @click="handleClick" :list="[{name:'车队账'},{name:'公司账'}]"
					:activeStyle="{color:'#0c9bf4'}"></up-tabs>
			</template>
			<template #right>
				<u-image width="48rpx" height="48rpx" :fade="false" @click="data.show = true"
					src="/static/images/icon_screen.png"></u-image>
			</template>
		</u-navbar>
		<view class="tab u-flex-y-center">
			<view :class="['tab-item',data.current == 1?'tab-text':'']" @click="handleChange(1)">收入</view>
			<view :class="['tab-item',data.current == 2?'tab-text':'']" @click="handleChange(2)">支出</view>
			<view :class="['tab-item',data.current == 3?'tab-text':'']" @click="handleChange(3)">利润</view>
			<view class="tab-item-active" :style="{left:tabLeft+'rpx'}"></view>
		</view>
		<view class="u-flex-y-center u-flex-between u-p-l-40 u-p-r-40 wallet u-m-b-30">
			<u-image src="/static/images/icon_money.png" width="80rpx" height="80rpx"></u-image>
			<block v-if="data.current == 1">
				<view>
					<u-text :text="countData.all_in_sum" size="40rpx" color="#0c9bf4"></u-text>
					<u-text text="总收入" size="24rpx" color="#0c9bf4"></u-text>
				</view>
				<view>
					<u-text :text="countData.today_in_sum" size="40rpx" color="#25D15E"></u-text>
					<u-text text="月收入" size="24rpx" color="#25D15E"></u-text>
				</view>
			</block>
			<block v-if="data.current == 2">
				<view>
					<u-text :text="countData.all_out_sum" size="40rpx" color="#0c9bf4"></u-text>
					<u-text text="总支出" size="24rpx" color="#0c9bf4"></u-text>
				</view>
				<view>
					<u-text :text="countData.today_out_sum" size="40rpx" color="#25D15E"></u-text>
					<u-text text="月支出" size="24rpx" color="#25D15E"></u-text>
				</view>
			</block>
			<block v-if="data.current == 3">
				<view>
					<u-text :text="countData.all_profit_sum" size="40rpx" color="#0c9bf4"></u-text>
					<u-text text="年利润" size="24rpx" color="#0c9bf4"></u-text>
				</view>
				<view>
					<u-text :text="countData.today_profit_sum" size="40rpx" color="#25D15E"></u-text>
					<u-text text="月利润" size="24rpx" color="#25D15E"></u-text>
				</view>
			</block>
		</view>
		<u-text align="right" suffix-icon="arrow-right" color="#333" :text="params.month" @click="changeTime"></u-text>
		<view style="height:750rpx">
			<qiun-data-charts type="mix" :opts="opts" :ontouch="true" :chartData="chartData" />
		</view>
	</view>
	<u-popup :show="data.show" @close="handleClose" height="300px">
		<view class="popup">
			<u-text text="筛选" margin="30rpx " align="center"></u-text>
			<view class="popup-item">
				<u-text text="工单" margin="0 0 24rpx" color="#333"></u-text>
				<view class="border-box u-flex-1 u-flex-y-center u-flex-between">
					<!-- <view class="search-input u-flex-y-center u-flex-between"> -->
					<u-input placeholder="请输入工单名称搜索" v-model="params.order_name" border="none"></u-input>
					<u-image src="/static/images/icon_ss.png" width="76rpx" @click="searchOrder" height="48rpx"></u-image>
					<!-- </view> -->
					<!-- <u-input border="none" v-model="params.order_name" @change="" placeholder="请输入工单名称搜索"
						input-align="right"></u-input> -->
				</view>
			</view>
			<view class="popup-item">
				<u-text text="车辆" margin="0 0 24rpx" color="#333"></u-text>
				<view class="border-box u-flex-1 u-flex-y-center u-flex-between">
					<u-text :color="params.car_text!='请选择'?'#0C9BF4':'#c0c4cc'" :text="params.car_text"
						@click="changeCar"></u-text>
					<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
				</view>
			</view>
			<view class="popup-item">
				<u-text text="类型" margin="0 0 24rpx" color="#333"></u-text>
				<u-row>
					<u-col span="4" v-for="(item,index) in data.typeList" :key="item.id">
						<view class="screen-item" :class="{'screen-item-select':params.type_id == item.id}"
							@click="changeType(item)">
							<view>{{item.title}}</view>
						</view>
					</u-col>
				</u-row>
			</view>

			<view class="u-flex-y-center u-flex-between u-p-t-30 u-p-b-30">
				<u-button color="#F5F5F5" customStyle="width:320rpx;height:80rpx;color:#000" @click="initParams">重置</u-button>
				<u-button color="#0C9BF4" customStyle="width:320rpx;height:80rpx" @click="confirmOrder">确认</u-button>
			</view>
		</view>
	</u-popup>
	<up-datetime-picker :show="data.timeShow" v-model="data.defaultTime" mode="year-month" :formatter="formatter"
		@cancel="changeTime" @confirm="confirmTime"></up-datetime-picker>
	<up-picker :show="data.carShow" closeOnClickOverlay :columns="data.car" @cancel="changeCar" @confirm="confirmCar"
		keyName="number"></up-picker>
	<up-picker :show="data.searchShow" closeOnClickOverlay :columns="data.searchList" @cancel="data.searchShow = false"
		@confirm="confirmSearch" keyName="name"></up-picker>
	<!-- 	<up-tabbar :value="'charts'" activeColor="#0C9BF4" inactiveColor="#BFBFBF">
		<up-tabbar-item text="首页" icon="/static/images/icon_gd.png"
			@click="handleRoute('/pages/index/index')"></up-tabbar-item>
		<up-tabbar-item text="记账" icon="/static/images/icon_bill.png"
			@click="handleRoute('/pages/bill/bill')"></up-tabbar-item>
		<up-tabbar-item text="统计" name="charts" icon="/static/images/icon_charts_y.png"></up-tabbar-item>
		<up-tabbar-item text="我的" icon="/static/images/icon_wd.png"
			@click="handleRoute('/pages/mine/mine')"></up-tabbar-item>
	</up-tabbar> -->
	<up-tabbar :value="'charts'" activeColor="#0C9BF4" inactiveColor="#BFBFBF">
		<up-tabbar-item text="首页" icon="/static/images/icon_gd.png"
			@click="handleRoute('/pages/index/index')"></up-tabbar-item>
		<up-tabbar-item text="记账" icon="/static/images/icon_bill.png"
			@click="handleRoute('/pages/bill/bill')"></up-tabbar-item>
		<up-tabbar-item name="charts" text="统计" icon="/static/images/icon_charts_y.png"></up-tabbar-item>
		<up-tabbar-item text="我的" icon="/static/images/icon_wd.png"
			@click="handleRoute('/pages/mine/mine')"></up-tabbar-item>
	</up-tabbar>
</template>
<script setup>
	import { ref, computed, onMounted } from "vue";
	import { accountStatistics, carList, searchOrderList, secondType } from "../../config/api";
	import { timeFormat } from 'uview-plus';
	import { onShow } from '@dcloudio/uni-app'
	const data = ref({
		current: 1,
		min: 0,
		timeShow: false,
		defaultTime: Number(new Date()),
		typeList: [],
		carShow: false,
		show: false,
		car: [],
		searchShow: false,
		searchList: []
	});
	const params = ref({
		month: timeFormat(new Date(), 'yyyy-mm'),
		type: 1,
		type_id: '',
		car_id: '',
		car_text: '请选择',
		order_id: '',
		order_name: ''
	})
	const opts = {
		color: ['#25D15E'],
		padding: [15, 15, 0, 5],
		enableScroll: true,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: false,
			scrollShow: true,
			itemCount: 6,
			gridType: 'dash'
		},
		yAxis: {
			gridType: 'dash',
			data: [{
				min: 0,
				title:'目标值'
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				linearType: 'linearType',
				linearOpacity: 0.6,
				customColor: ['#25D15E', '#FFFFFF']
			}
		}
	}
	const chartData = ref({
		categories: [],
		series: [{
			name: "目标值",
			data: [],
			type:'column',
		},{
			name: "目标值",
			data: [],
			type:'line'
		}]
	})
	const countData = ref({
		day_in_list: [],
		day_out_list: [],
		day_profit_list: []
	})
	onShow(() => {
		uni.hideTabBar()
		_secondType()
		_accountStatistics()
		_carList()
	})
	const handleRoute = (page) => {
		uni.switchTab({
			url: page
		})
	}
	const confirmSearch = (row) => {
		params.value.order_name = row.value[0].name
		params.value.order_id = row.value[0].id
		data.value.searchShow = false
	}
	const searchOrder = () => {
		let value = params.value.order_name
		if (!value) data.value.searchShow = false
		else {
			searchOrderList({ keywords: params.value.order_name }).then(res => {
				if (!res.data.length) uni.$u.toast('没有查到此工单')
				else {
					data.value.searchList = [res.data]
					data.value.searchShow = true
				}
			})
		}
	}

	const confirmOrder = () => {
		data.value.show = false
		console.log(params.value)
		_accountStatistics()
	}
	const initParams = () => {
		params.value.type_id = ''
		params.value.car_id = ''
		params.value.car_text = '请选择'
		params.value.order_id = ''
		params.value.order_name = ''
	}
	// 车辆列表
	const _carList = () => {
		carList().then(res => {
			console.log(res)
			data.value.car = [res.data]
		})
	}
	const confirmCar = (row) => {
		params.value.car_text = row.value[0].number
		params.value.car_id = row.value[0].id
		data.value.carShow = false
		console.log(row)
	}
	const changeCar = () => {
		data.value.carShow = !data.value.carShow
	}
	const changeType = (item) => {
		params.value.type_id = item.id
	}
	const _secondType = () => {
		secondType().then(res => {
			data.value.typeList = res.data
		})
	}
	const handleClick = (row) => {
		console.log(row)
		params.value.type = row.index + 1
		params.value = {
			month: timeFormat(new Date(), 'yyyy-mm'),
			type_id: '',
			car_id: '',
			car_text: '请选择',
			order_id: '',
			order_name: ''
		}
		_accountStatistics()
	}
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		return value;
	}
	// 时间确认选择
	const confirmTime = (row) => {
		params.value.month = uni.$u.timeFormat(row.value, 'yyyy-mm')
		data.value.timeShow = false
		_accountStatistics()
	}
	const changeTime = () => {
		data.value.timeShow = !data.value.timeShow
	}
	// 数据统计
	const _accountStatistics = () => {
		accountStatistics({ ...params.value }).then(res => {
			let day_in_month_list = []
			let day_out_month_list = []
			let day_profit_month_list = []
			res.data.day_in_list.forEach((item, index) => {
				day_in_month_list.push(index + 1)
			})
			res.data.day_out_list.forEach((item, index) => {
				day_out_month_list.push(index + 1)
			})
			let min = 0
			res.data.day_profit_list.forEach((item, index) => {
				min = item > min ? min : item
				day_profit_month_list.push(index + 1)
			})
			data.value.min = min - 10
			countData.value = res.data
			/****收入***/
			countData.value.day_in_list = res.data.day_in_list.map(item => parseFloat(item))
			countData.value.day_in_month_list = day_in_month_list
			/****支出***/
			countData.value.day_out_list = res.data.day_out_list.map(item => parseFloat(item))
			countData.value.day_out_month_list = day_out_month_list
			/****利润***/
			countData.value.day_profit_list = res.data.day_profit_list.map(item => parseFloat(item))
			countData.value.day_profit_month_list = day_profit_month_list

			chartData.value.categories = countData.value.day_in_month_list
			chartData.value.series[0].data = countData.value.day_in_list
			chartData.value.series[1].data = countData.value.day_in_list
		})
	}
	const tabLeft = computed(() => {
		return 230 * (data.value.current - 1) + 6
	})
	const handleChange = (val) => {
		data.value.current = val
		if (val == 1) {
			opts.yAxis.data[0].min = 0
			chartData.value.categories = countData.value.day_in_month_list
			chartData.value.series[0].data = countData.value.day_in_list.map(item => parseFloat(item))
		} else if (val == 2) {
			opts.yAxis.data[0].min = 0
			chartData.value.categories = countData.value.day_out_month_list
			chartData.value.series[0].data = countData.value.day_out_list.map(item => parseFloat(item))
		} else {
			opts.yAxis.data[0].min = data.value.min
			chartData.value.categories = countData.value.day_profit_month_list
			chartData.value.series[0].data = countData.value.day_profit_list.map(item => parseFloat(item))
		}
	}
	const handleClose = () => {
		data.value.show = false
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		padding: 0 24rpx;
	}

	.tab {
		background: #0C9BF4;
		height: 80rpx;
		border-radius: 12rpx;
		padding: 4rpx 6rpx;
		margin-top: 30rpx;
		position: relative;
		z-index: 2;

		&-item {
			width: 230rpx;
			height: 100%;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			transition: all .3s;
		}

		&-item-active {
			background: #fff;
			width: 230rpx;
			height: 76rpx;
			border-radius: 12rpx;
			position: absolute;
			z-index: -1;
			transition: all .3s;
		}

		&-text {
			color: #0C9BF4;
		}
	}

	.wallet {
		background: #FAFAFA;
		border-radius: 12rpx;
		height: 160rpx;
		margin-top: 20rpx;
	}

	.popup {
		padding: 0 36rpx;

		.screen-item {
			width: 200rpx;
			height: 72rpx;
			border-radius: 12rpx;
			background: #fafafa;
			font-size: 28rpx;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 72rpx;
		}

		.screen-item-select {
			background: #0C9BF4;
			color: #fff;
		}

		.popup-item+.popup-item {
			margin-top: 10px;
		}
	}

	::v-deep .u-row {
		flex-wrap: wrap;
	}

	.border-box {
		padding: 16rpx 20rpx;
		background: #FAFAFA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
</style>